import React,{Fragment} from 'react'
import { connect } from "react-redux"

const TodoList = (props) =>{
    const {inputValue,list,handleInputChange,handleBtnClick,handleDelete} = props

        return(
            <Fragment>
                <div>
                  {/* 使用connect后可以使用this.props.xxx,由于Provider将store传过来了，所以可以用直接用xxx*/}
                    <input value={inputValue} onChange={handleInputChange}/>
                    <button onClick={handleBtnClick}>提交</button>
                </div>
                <ul>
                    {
                        list.map((item,index) => {
                            return(
                                <li key={index}
                                    onClick={() => {handleDelete(index)}}
                                >
                                    {item}
                                </li>
                            )
                        })
                    }                 
                </ul>
            </Fragment>
        )   
}



//mapStateToProps：从Redux状态树中提取需要的部分作为props传递给当前的组件。
//mapDispatchToProps：将需要绑定的响应事件（action）作为props传递到组件上。

//connect链接让我这个组件TodoList与store做链接 规则在mapStateToProps
//store里的inputValue会映射到我们组建mapStateToProps的inputValue里面
//要是用store里的list，把它放到mapStateToProps中的list里面使用
const mapStateToProps = (state) => {
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}

//store里的dispatch映射到mapDispatchToProps
const mapDispatchToProps = (dispatch) => {
    return{

        handleInputChange(e){
            //console.log(e.target.value)
            const action = {
                type:'change_input_value',
                value:e.target.value
            }
            dispatch(action)
        },
        handleBtnClick(){
            const action = {
                type:'add_item',
            }
            dispatch(action)
        },
        handleDelete(index){
            console.log(index)
            const action = {
                type:'delete_item',
                index
            }
            dispatch(action)
        }

    }
}

//返回容器组件
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

